<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 定义挂载点 -->
    <div id="app">
        <div>111</div>
        <DIV>大写</DIV>  
        <web-nav></web-nav>
        <d-i-v></d-i-v>
        <v-one></v-one>
    </div>

    <script>
        new Vue({
            //挂载点
            el:"#app",
            //数据
            data:{},
            //方法
            methods:{},
            components:{
                // 错误演示1：不用使用以及存在的标签命名，eg：div、p、span 、a、b....
                // div:{
                //     template:"<div>我是一个盒子</div>"
                // },
              
                // 错误演示2：不用使用以及存在的标签的大写命名，eg：DIV、P,SPAN ...
                // DIV:{
                //     template:"<div>我是一个盒子</div>"
                // }
 
                //3. 如果组件名中间包含了大写字母，调用的时候需要变成 -小写  烤串写法
                webNav:{
                    template:  `<ul>
                    <li>首页</li>
                    <li>列表页</li>
                    <li>详情页</li>
                    <li>播放页</li>
                </ul>`
                },
                //第一个字母就是大写可以不写-
                DIV:{
                    template:"<div>我是一个盒子</div>"
                },
                //4.建议：组件名称中包含一个大写字母，方便调用
                vOne:{
                    template:"<div>这是on</div>"
                }
            }
        })
    </script>
</body>
</html>